<template>
    <view class="wrap">
        <!-- <view class="header">
            :style="{height: navHeight+'px',paddingTop: statusBarHeight+'px'}"
            <view class="nav">
                <view class="nav_text">金考典题库管理</view>
            </view>
        </view> -->
        <NavBar title="督学二级分类" :isBack="true" :titleColor="'#ffffff'" :titlePosition="'left'" :fontSize="'48rpx'"></NavBar>
        <view class="header">
            <!-- <input class="top_input" type="text" placeholder="请输入搜索关键字"> -->
            <u--input
                class="customClass"
                placeholder="前置图标"
                prefixIcon="search"
                shape="circle"
                fontSize="28rpx"
                prefixIconStyle="font-size: 42rpx;color: #ffffff"
                placeholderStyle="color: #ffffff"
                customStyle="border: 2rpx solid #fff"
            ></u--input>
        </view>

        <view class="class_list">
            <div class="class_item" v-for="item in 10">
                <div class="item_top dis_flex al_center just_sb">
                    <div class="top_title">督学名称班级01</div>
                    <div class="top_button">进入班级</div>
                </div>
                <div class="item_bottom">2024-06-17 13:33  到期</div>
            </div>
        </view>

        <PopWindow/>
    </view>
</template>

<script>
import PopWindow from '@/components/PopWindow'
export default {
    data () {
        return {
            
        }
    },
    onLoad () {

    },
    methods: {
    },
    components: {
        PopWindow
    }
}
</script>

<style lang="scss" scoped>
    .wrap {
        width: 100%;
        min-height: 100vh;
        overflow-x: hidden;
    }

    .header {
        width: 100%;
        height: 286rpx;
        padding: 126rpx 36rpx 0;
        box-sizing: border-box;
        background: linear-gradient(298deg, #5E637E 0%, #79829A 100%);
        background-image: url("@/static/img/blue_bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 0rpx;
        .top_input {
            color: #FFFFFF;
            font-size: 28rpx;
        }
        /deep/.u-border {
            border: 2rpx solid #fff!important;
        }
    }

    .class_list {
        width: 100%;
        height: 330rpx;
        background: linear-gradient(180deg, #DFEDFD 0%, #FFFFFF 100%);
        border-radius: 32rpx;
        padding: 46rpx 36rpx;
        box-sizing: border-box;
        margin-top: -36rpx;
        .class_item {
            width: 100%;
            padding-bottom: 108rpx;
            .item_top {
                width: 100%;
                .top_title {
                    font-weight: bold;
                    font-size: 36rpx;
                    color: #000000;
                }
                .top_button {
                    width: 156rpx;
                    height: 58rpx;
                    line-height: 58rpx;
                    text-align: center;
                    background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
                    border-radius: 8rpx;
                    font-weight: bold;
                    font-size: 24rpx;
                    color: #FFFFFF;
                }
            }
            .item_bottom {
                padding-top: 20rpx;
                font-weight: 500;
                font-size: 26rpx;
                color: #A47812;
            }
        }
    }
</style>